<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Home</title>
	<%
		pageContext.setAttribute("status", request.getAttribute("status"));
		pageContext.setAttribute("APP_PATH", request.getContextPath());
	%>
	<link rel="icon" href="${APP_PATH}/favicon.ico" type="image/x-icon">
	<link href="${APP_PATH}/static/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet">
	<link href="${APP_PATH}/static/css/index.css" rel="stylesheet">
	<link href="${APP_PATH}/static/css/common_style.css" rel="stylesheet">
</head>

<body class="body-home">
<%@ include file="./jsp/nav.jsp" %>
<%--登录窗口--%>
<div class="modal fade" id="myModal" aria-labelledby="myModallabel" aria-hidden="true" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button class="close" type="button" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h5 class="modal-title" id="myModallabel">登录</h5>
			</div>
			<%--登录--%>
			<div id="login-panel">
				<form id="formData" class="form-horizontal">
					<div class="modal-body">
						<div class="form-group">
							<label class="control-label col-md-2">用户名:</label>
							<div class="col-md-9">
								<input type="text" value="" name="username" placeholder="账号或邮箱" class="form-control">
								<br>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-2">密码:</label>
							<div class="col-md-9">
								<input type="password" placeholder="密码" value="" name="password" class="form-control">
							</div>
						</div>
						<div class="form-group">
							<div class="col-md-12">
								<button id="login-change" type="button" class="login-change btn btn-link"
										style="float:right">没有账号？点我注册
								</button>
							</div>
						</div>
					</div>

					<div class="modal-footer">
						<button class="btn btn-danger" type="button" data-dismiss="modal">关闭</button>
						<button class="btn btn-warning" type="submit">登录</button>
					</div>
				</form>
			</div>
			<%--注册--%>
			<div id="register-panel" class="hidden">
				<form id="register-form" class="form-horizontal" action="register" method="post">
					<div class="modal-body">
						<div id="register_alter_control" class="hidden">
							<div class="alert alert-danger alert-dismissible" role="alert"></div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-2">用户名:</label>
							<div class="col-md-9">
								<div class="input-group">
									<input maxlength="" type="text" value="" name="username" placeholder="用户名"
										   class="form-control" hint-target="un_hint">
									<div class="input-group-addon"><span class="glyphicon glyphicon-record"
																		 aria-hidden="true"></span></div>
								</div>
								<span id="un_hint" class="register_hint"></span>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-2">账号:</label>
							<div class="col-md-9">
								<div class="input-group">
									<input maxlength="" type="text" value="" name="account" placeholder="账号"
										   class="form-control" hint-target="ac_hint">
									<div class="input-group-addon"><span class="glyphicon glyphicon-record"
																		 aria-hidden="true"></span></div>
								</div>
								<span id="ac_hint" class="register_hint"></span>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-2">密码:</label>
							<div class="col-md-9">
								<div class="input-group">
									<input type="password" placeholder="密码" value="" name="password"
										   class="form-control" hint-target="pw_hint">
									<div class="input-group-addon"><span class="glyphicon glyphicon-record"
																		 aria-hidden="true"></span></div>
								</div>
								<span id="pw_hint" class="register_hint"></span>
							</div>
						</div>

						<div class="form-group">
							<label class="control-label col-md-2">确认密码:</label>
							<div class="col-md-9">
								<div class="input-group">
									<input type="password" placeholder="确认密码" value="" name="re_password"
										   class="form-control" hint-target="rpw_hint">
									<div class="input-group-addon"><span class="glyphicon glyphicon-record"
																		 aria-hidden="true"></span></div>
								</div>
								<span id="rpw_hint" class="register_hint"></span>
							</div>
						</div>

						<div class="form-group">
							<label class="control-label col-md-2">邮箱:</label>
							<div class="col-md-9">
								<div class="input-group">
									<input type="text" placeholder="邮箱" value="" name="email" class="form-control">
									<div class="input-group-addon"><span class="glyphicon glyphicon-record"
																		 aria-hidden="true"></span></div>
								</div>
							</div>
						</div>
					</div>

					<div class="modal-footer">
						<button class="login-change btn btn-danger" type="button">返回</button>
						<button id="register_from_submit" class="btn btn-warning" type="submit" onclick="">填好了</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<%--登录窗口结束--%>

<%--注册成功模态框--%>
<div class="modal" id="register-Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
	<div class="modal-dialog" style="width: 300px">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel2">
					提示
				</h4>
			</div>
			<div class="modal-body">
				注册成功！
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>

<div class="home">
	<div class="landing-section face">
		<div class="jumbotron">
			<div class="container">
				<h1 class="landing-title">
					你好，
					<%--@elvariable id="user" type="com.red.entity.User"--%>
					<c:if test="${empty user}">
						彩虹🌈
					</c:if>
					<c:if test="${!(empty user)}">
						<c:out value="${user.uName}"/>
					</c:if>
					！
				</h1>
				<p>This's home.</p>
				<p class="cta-buttons">
					<c:if test="${empty user}">
						<a class="btn btn-warning btn-lg cta-main" href="#" onclick="$('#myModal').modal('show');">
							登录
						</a>
					</c:if>
				</p>
			</div>
		</div>
	</div>
	<iframe src="${APP_PATH}/houseQuery?mode=1"></iframe>
</div>
<div class="container landing-section bottom">
	<div class="text-center"><span><a href="https://beian.miit.gov.cn">湘ICP备 2021018876 号</a></span></div>
</div>
<script src="${APP_PATH}/static/js/login.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
		integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
		crossorigin="anonymous"></script>
<script src="${APP_PATH}/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/js/register_form.js"></script>
<c:if test="${ !(empty status)}">
	<c:if test="${status == 'ap-error'}">
		<script>$(function () {

        })</script>
	</c:if>
	<c:if test="${status == 'register_success'}">
		<script>$(function () {
            $('#register-Modal').modal('show');
        })</script>
	</c:if>
	<c:if test="${status == 'register_failed'}">
		<script>
            $('#myModal').modal('show');
            const modal = document.querySelector("#myModal");
            modal.panelchange();
            modal.showRegisterAlter("注册失败，账号已存在");
		</script>
	</c:if>
</c:if>
<script>
    const from = $("#formData")
    const login_username = $("#formData [name='username']")[0]
    const login_password = $("#formData [name='password']")[0]

    from[0].onsubmit = function (e) {
        e.preventDefault()
        if (login_username.value === '' || login_password.value === '') {
            alert("输入账号和密码")
        } else {
            $.ajax({
                url: "${APP_PATH}/login",
                type: 'POST',
                dataType: 'text',
                data: from.serialize(),
                success: function () {
                    location.href = "${APP_PATH}/"
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert("登录失败：" + XMLHttpRequest.responseText)
                    from[0].reset()
                }
            });
        }
    }
</script>
</body>
</html>